<template>
  <div id="card" v-if="todoEvent.length">
    <el-card>
      <div id="smallcard">
        <div id="icon">
          <el-icon style="font-size: 50px">
            <FolderRemove color="#fff" />
          </el-icon>
        </div>
        <div id="text">
          <span>待处理</span>
          <span id="count" style="font-size: 25px">{{ todoEvent.length }}</span>
        </div>
      </div>
    </el-card>
    <el-card>
      <div id="smallcard">
        <div id="icon">
          <el-icon style="font-size: 50px">
            <Clock color="#fff" />
          </el-icon>
        </div>
        <div id="text">
          <span>处理中</span>
          <span id="count" style="font-size: 25px">{{
            doingEvent.length
          }}</span>
        </div>
      </div>
    </el-card>
    <el-card>
      <div id="smallcard">
        <div id="icon">
          <el-icon style="font-size: 50px">
            <FolderChecked color="#fff" />
          </el-icon>
        </div>
        <div id="text">
          <span>已归档</span>
          <span id="count" style="font-size: 25px">{{ doneEvent.length }}</span>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script setup>
import { Query } from "../../../../utils/Query";
let features = null;

let todoEvent = ref([]);
let doingEvent = ref([]);
let doneEvent = ref([]);

const success = (data) => {
  let format = new Zondy.Format.PolygonJSON();
  features = format.read(data);
  // console.log(features);
  getAllstatus();
};
Query.queryByLayer({
  service: { name: "guanggu", layerId: 2 },
  success: success,
});

const getAllstatus = () => {
  todoEvent.value = features.filter(
    (item) => item.values_.values_.处理状态 === "0"
  );
  doingEvent.value = features.filter(
    (item) => item.values_.values_.处理状态 === "1"
  );
  doneEvent.value = features.filter(
    (item) => item.values_.values_.处理状态 === "2"
  );
};
</script>

<style scoped>
#card {
  display: flex;
  position: absolute;
  width: 400px;
  justify-content: space-between;
  display: flex;
  left: 3%;
  background-color: ragb(0, 0, 0, 0);
  top: 80px;
}

#smallcard {
  display: flex;
  background-color: rgba(0, 60, 136, 0.7);
}

#text {
  display: grid;
  grid-template-rows: auto;
  color: white;
  margin-left: 1px;
  margin-right: 3px;
  padding: 5px;
}

.el-card {
  --el-card-padding: 0px;
  border-radius: 15px;
  background-color: ragb(0, 0, 0, 0);
}
#count {
  margin-top: 20px;
  margin-left: 5px;
}
#icon {
  margin-top: 15px;
  margin-left: 6px;
}
</style>
